<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '🍜'">update eat</button>
</template>

<script>
import { watch, ref } from 'vue'
export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    // watch 监听 ref 类型的数据，默认是浅监听（只监听最外面一层）
    watch(
      obj,
      (newValue) => {
        console.log(newValue)
      },
      {
        deep: true,
      }
    )
    return { obj }
  },
}
</script>
